$(function() {
    $.ajaxSetup({
        type: "post",
        dataType: "json"
    });

    var provid = 0;

    var type2txt = {
        0: "管理员推荐",
        1: "公共最热",
        2: "区域最热",
        3: "随机"
    };

    var Gallery = Backbone.Model.extend({
        defaults: {
            "provid": 0,
            "gtype": 0,
            "remark": "",
            "seq": 0,
            "ctime": ""
        }
    });

    var GalleryList = Backbone.Collection.extend({
        url: '/cms2/topic/gallery/get',

        model: Gallery,

        parse: function(res) {
            if(res.ret == 0) {
                return res.res;
            }
        }
    });

    var gallerys = new GalleryList;

    var GalleryListView = Backbone.View.extend({
        template: _.template($("#topic-gallery-template").html()),

        events: {
            'change #select-prov': "changeProv",
            'click #edit-g': "openEdit",
            "click #cancel-g": "closeEdit",
            "click .add-gallery": "addGallery",
            "click .del-gallery": "delGallery",
            "click #save-g": "saveGallery",
            "click #refresh-g": "refreshGallery"
        },

        initialize: function() {
            this.listenTo(gallerys, 'add', this.addOne);
            this.listenTo(gallerys, 'reset', this.addAll);
            //this.listenTo(gallerys, 'all', this.render);

            gallerys.fetch({
                data: {
                    provid: provid
                },
                reset: true
            });
        },

        addOne: function(model) {
            this.$(".gallery-list").append(this.template(
                _.extend({}, model.toJSON(), {type2txt: type2txt})
            ));
        },

        addAll: function() {
            this.$(".gallery-list").empty();
            gallerys.each(this.addOne, this);
        },

        render: function() {
            return this;
        },

        refresh: function() {
            gallerys.fetch({
                data: {
                    provid: provid
                },
                reset: true
            });
        },

        changeProv: function() {
            provid = this.$("#select-prov").val();

            this.showEditButton();
            this.refresh();
        },

        showEditButton: function() {
            this.$("#refresh-g").show();
            this.$("#edit-g").show();
            this.$("#save-g").hide();
            this.$("#cancel-g").hide();
        },

        hideEditButton: function() {
            this.$("#refresh-g").hide();
            this.$("#edit-g").hide();
            this.$("#save-g").show();
            this.$("#cancel-g").show();
        },

        openEdit: function() {
            this.$(".del-gallery-box").show();
            this.$(".new-gallery-panel").show();
            this.hideEditButton();
        },

        closeEdit: function() {
            this.$(".del-gallery-box").hide();
            this.$(".new-gallery-panel").hide();
            this.showEditButton();
            this.addAll();
        },

        addGallery: function(e) {
            e.preventDefault();

            var galleryInfo = {};
            var gtype = parseInt($("[name='new-type']:checked").val());

            galleryInfo['gtype'] = gtype;

            if (gtype == 0) {
                var remark = $("#sugg-topic").val();
            } else {
                remark = "";
            }

            galleryInfo['remark'] = remark;

            this.$(".gallery-list").append(
                this.template($.extend({}, galleryInfo, {type2txt: type2txt}))
            );
        },

        delGallery: function(e) {
            e.preventDefault();
            var $current = $(e.currentTarget);
            $current.closest(".gallery-item").remove();
        },

        saveGallery: function(e) {
            e.preventDefault();

            var gallerys = [];
            this.$(".gallery-item").each(function() {
                var $this = $(this);
                var gtype = $this.find("[name=gtype]").val();
                var remark = $this.find("[name=remark]").val();
                gallerys.push({
                    gtype: gtype,
                    remark: remark
                });
            });

            var galleryAddUrl = "/cms2/topic/gallery/add";
            var data = {
                provid: provid,
                gallery: JSON.stringify(gallerys)
            };

            $.ajax({
                url: galleryAddUrl,
                data: data,
                success: function(res) {
                    if(res.ret == 0) {
                        window.location.reload();
                    } else {
                        alert(res.msg);
                    }
                },
                error: function() {

                }
            });
        },

        refreshGallery: function() {
            e.preventDefault();

            var url = "/cms2/topic/gallery/refresh";
            var data = {
                provid: provid
            };

            $.ajax({
                url: url,
                data: data,
                success: function(res) {
                    if(res.ret == 0) {
                        alert("刷新成功");
                    }
                },
                error: function() {

                }
            });
        }
    });

    function initGallery() {
        new GalleryListView({
            el: $(".gallery-panel")
        })
    }

    initGallery();

    //function renderGalleryList(provid) {
    //    var galleryListUrl = window.location.pathname;
    //    var data = {
    //        provid: provid
    //    };
    //
    //    $.ajax({
    //        url: galleryListUrl,
    //        data: data,
    //        success: function(res) {
    //            if(res.ret == 0) {
    //                $(".gallery-list").empty();
    //                $.each(res.res, function(idx, galleryInfo) {
    //                    $(".gallery-list").append(
    //                        topicGalleryTemplate($.extend({}, galleryInfo, {type2txt: type2txt}))
    //                    );
    //                });
    //            } else {
    //                alert(res.msg)
    //            }
    //        },
    //        error: function() {
    //
    //        }
    //    });
    //}
    //
    //$(".new-gallery").on("click", function(e) {
    //    e.preventDefault();
    //
    //    $(".new-gallery-panel").toggle();
    //});
    //
    //$(".add-gallery").on("click", function(e) {
    //    e.preventDefault();
    //
    //    var galleryInfo = {};
    //
    //    var gtype = parseInt($("[name='new-type']:checked").val());
    //
    //    galleryInfo['gtype'] = gtype;
    //
    //    if (gtype == 0) {
    //        var remark = $("#sugg-topic").val();
    //    } else {
    //        remark = "";
    //    }
    //
    //    galleryInfo['remark'] = remark;
    //
    //    $(".gallery-list").append(
    //        topicGalleryTemplate($.extend({}, galleryInfo, {type2txt: type2txt}))
    //    );
    //});
    //
    //$("body").on("click", ".del-gallery", function(e) {
    //    e.preventDefault();
    //
    //    var $current = $(e.currentTarget);
    //
    //    $current.closest(".gallery-panel").remove();
    //});
    //
    //$("#submit-g").on("click", function(e) {
    //    e.preventDefault();
    //
    //    var gallerys = [];
    //    $(".gallery-panel").each(function() {
    //        var $this = $(this);
    //        var gtype = $this.find("[name=gtype]").val();
    //        var remark = $this.find("[name=remark]").val();
    //        gallerys.push({
    //            gtype: gtype,
    //            remark: remark
    //        });
    //    });
    //
    //    var galleryAddUrl = "/cms2/topic/gallery/add";
    //    var data = {
    //        provid: provid,
    //        gallery: JSON.stringify(gallerys)
    //    };
    //
    //    $.ajax({
    //        url: galleryAddUrl,
    //        data: data,
    //        success: function(res) {
    //            if(res.ret == 0) {
    //                window.location.reload();
    //            } else {
    //                alert(res.msg);
    //            }
    //        },
    //        error: function() {
    //
    //        }
    //    });
    //});
    //
    //$("#refresh-g").on("click", function(e) {
    //    e.preventDefault();
    //
    //    var url = "/cms2/topic/gallery/refresh";
    //    var data = {
    //        provid: provid
    //    };
    //
    //    $.ajax({
    //        url: url,
    //        data: data,
    //        success: function(res) {
    //            if(res.ret == 0) {
    //                alert("刷新成功");
    //            }
    //        },
    //        error: function() {
    //
    //        }
    //    });
    //});
    //
    //renderGalleryList(provid);
});